<!-- 我是产品 -->
<template lang="html">
  <div class="productBox">
    <el-row class="bg-white">
      <el-col :span="2" style="width:80px;">
        <div :class="productTab==1?'productTab active':'productTab'" @click="tabList(1)">
          游玩
        </div>
      </el-col>
      <el-col :span="2" style="width:80px;">
        <div :class="productTab==2?'productTab active':'productTab'" @click="tabList(2)">
          酒店
        </div>
      </el-col>
      <el-col :span="2" style="width:80px;">
        <div :class="productTab==3?'productTab active':'productTab'" @click="tabList(3)">
          剧场
        </div>
      </el-col>
      <!-- <el-col :span="2" style="width:80px;">
        <div :class="productTab==4?'productTab active':'productTab'" @click="tabList(4)">
          商场
        </div>
      </el-col>
      <el-col :span="2" style="width:80px;">
        <div :class="productTab==9?'productTab active':'productTab'" @click="tabList(9)">
          美食
        </div>
      </el-col> -->
      <!-- <el-col :span="2">
        <div :class="productTab==5?'productTab active':'productTab'" @click="tabList(5)">
          套餐
        </div>
      </el-col> -->
      <el-col :span="2" style="width:80px;">
        <div :class="productTab==6?'productTab active':'productTab'" @click="tabList(6)">
          卡券
        </div>
      </el-col>
      <el-col :span="2" style="width:80px;">
        <div :class="productTab==7?'productTab active':'productTab'" @click="tabList(7)">
          OTA
        </div>
      </el-col>
      <el-col :span="2">
        <div :class="productTab==10?'productTab active':'productTab'" @click="tabList(10)">
          团体活动
        </div>
      </el-col>
      <el-col :span="2">
        <div :class="productTab==11?'productTab active':'productTab'" @click="tabList(11)">
          教育培训
        </div>
      </el-col>
      <!-- <el-col :span="2" style="width:100px;">
        <div :class="productTab==8?'productTab active':'productTab'" @click="tabList(8)">
        自营产品
        </div>
      </el-col> -->
    </el-row>
    <router-view> </router-view>
    <el-dialog :title="$store.state.TanProduct.title" :visible.sync="$store.state.TanProduct.TanVisible"
     :size="$store.state.TanProduct.TanType==5||$store.state.TanProduct.TanType==10?'large':'small'">
      <v-date v-if="$store.state.TanProduct.TanType==1"></v-date>
      <v-history v-if="$store.state.TanProduct.TanType==5"></v-history>
      <v-ywhistory v-if="$store.state.TanProduct.TanType==10"></v-ywhistory>
      <v-hotel v-if="$store.state.TanProduct.TanType==2"></v-hotel>
      <v-contact v-if="$store.state.TanProduct.TanType==3"></v-contact>
      <v-contact2 v-if="$store.state.TanProduct.TanType==6"></v-contact2>
      <v-opera v-if="$store.state.TanProduct.TanType==7"></v-opera>
      <v-opera2 v-if="$store.state.TanProduct.TanType==9"></v-opera2>
      <v-OTA v-if="$store.state.TanProduct.TanType==4"></v-OTA>
      <v-OTA2 v-if="$store.state.TanProduct.TanType==8"></v-OTA2>

    </el-dialog>
  </div>
</template>

<script>
import TanDate from "./TanDate.vue"
import TanHotel from "./TanHotel.vue"
import TanContact from "./TanContact.vue"
import TanContact2 from "./TanContact2.vue"
import TanOTA from "./TanOTA.vue"
import TanOTA2 from "./TanOTA2.vue"
import TanHistory from "./TanHistory.vue"
import ywHistory from "./ywHistory.vue"
import TanOpera from "./TanOpera.vue"
import TanOperaYY from "./TanOperaYY.vue"

export default {
  data(){
    return {
      productTab:1,
      dialogSize:'small'
    }
  },
  methods:{
    tabList:function (n){
      var that = this;
      that.productTab=n;
      switch (n) {
        case 1:
          that.$router.push({path:'/product/scenicSpot'});
          break;
        case 2:
          that.$router.push({path:'/product/hotel'});
          break;
        case 3:
          that.$router.push({path:'/product/opera'});
          break;
        case 4:
          that.$router.push({path:'/product/SC'});
          break;
        case 5:
          that.$router.push({path:'/product/productPackage'});
          break;
        case 6:
          that.$router.push({path:'/product/card'});
          break;
        case 7:
          that.$router.push({path:'/product/productOTA'});
          break;
        case 8:
          that.$router.push({path:'/product/self'});
          break;
        case 9:
          that.$router.push({path:'/product/food'});
          break;
        case 10:
          that.$router.push({path:'/product/group'});
        case 11:
          that.$router.push({path:'/product/study'});
          break;
        default:
          break;
      }
    }
  },
  computed:{

  },
  components:{
    'v-date':TanDate,
    'v-hotel':TanHotel,
    'v-contact':TanContact,
    'v-contact2':TanContact2,
    'v-OTA':TanOTA,
    'v-OTA2':TanOTA2,
    'v-history':TanHistory,
    'v-ywhistory':ywHistory,
    'v-opera':TanOpera,
    'v-opera2':TanOperaYY
  },
  created(){
    var arr=window.location.href.split("/");
    console.log(arr[arr.length-1]);
    switch (arr[arr.length-1]) {
      case 'scenicSpot':
        this.productTab=1;
        break;
      case 'hotel':
        this.productTab=2;
        break;
      case 'opera':
        this.productTab=3;
        break;
      case 'SC':
        this.productTab=4;
        break;
      case 'food':
        this.productTab=9;
        break;
      case 'card':
        this.productTab=6;
        break;
      case 'productOTA':
        this.productTab=7;
        break;
      case 'self':
        this.productTab=8;
        break;
      default:

    }
    this.$store.state.index='2';
  }
}
</script>

<style lang="Sass" scoped>
.productBox{ width: 100%; height: 100%; background: #F7F8FC;

  .productTab{height: 40px; line-height: 40px; margin: 0 20px; font-size: 13px; box-sizing: border-box; cursor: pointer;}
  .active{border-bottom: 4px solid #13CE66;}
  .btn{}
}

</style>
